<template>
	<div id="djd-rec">
		<el-col :span="24">
			<div v-for="(item, index) in tj" :key="index" class="djd_rec_a" href="#">
				<el-image :src="item.imgUrl"></el-image>
				<span class="djd_rec_title1">{{ item.score }}分</span>
				<span class="djd_rec_title">{{ item.name }}</span>
			</div>
		</el-col>
	</div>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			tj: {},
		},
	};
</script>

<style scoped>
	/deep/ .el-col-24 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: 15px;
	}
	.djd_rec_a {
		position: relative;
		box-sizing: border-box;
		padding-bottom: 8px;
		width: 24%;
		cursor: pointer;
	}
	#djd-rec .el-image {
		width: 100%;
		height: 230px;
	}
	.djd_rec_title {
		color: #ffffff;
		position: absolute;
		left: 25px;
		bottom: 40px;
	}
	.djd_rec_title1 {
		color: #ffffff;
		position: absolute;
		left: 20%;
		top: 10%;
		width: 50px;
		height: 21px;
		border-radius:5px;
		background-color: #333333;
		text-align: center;
		transform: translate(-50%, -50%);
	}
</style>